<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div v-loading="loading">
        <el-tabs :stretch="true" v-model="activeTab">
            <el-tab-pane label="基础" name="base">
                <el-form-item label="按钮列数">
                    <el-radio-group v-model="module.styleName">
                        <el-radio label="4">4列</el-radio>
                        <el-radio label="5">5列</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="选择">
                    <position-selector cat="nav" v-model="positionId"></position-selector>
                </el-form-item>

                <el-alert type="info" v-if="module.items == 0" style="font-size: 10px; color: #999">请先上传图片</el-alert>
                <el-form-item label="快速排序">

                    <el-button @click="submitOrders" type="primary" plain size="mini">保存排序</el-button>
                </el-form-item>
                <draggable class="nav-list" filter=".nav-item.new" v-model="navs">
                    <div class="nav-list-li" v-for="(nav, index) in navs" :nav="nav">
                        <div class="icon">
                            <el-image style="width: 30px; height: 30px" :src="nav.icon"></el-image>
                        </div>
                        <div class="name">
                            {{ nav.name }}
                        </div>
                        <div class="actions">
                            <el-link type="primary" @click="editHandle(nav)">修改</el-link>
                            <el-link type="danger" @click="deleteHandle(nav)">删除</el-link>
                        </div>
                    </div>
                </draggable>


            </el-tab-pane>
            <el-tab-pane label="标题" name="header">
                <header-editor :module="module.header" v-if="module.header"></header-editor>
            </el-tab-pane>

            <el-tab-pane label="样式" name="style">
                <module-style-editor :module="module"></module-style-editor>
            </el-tab-pane>
        </el-tabs>

        <nav-item-form @change="formChange" ref="navform"></nav-item-form>
    </div>
</template>

<script>
import ModuleStyleEditor from "../ModuleStyleEditor/Index";
import HeaderEditor from "../base/HeaderEditor";
import ImagePicker from "@/components/ImagePicker";
import draggable from "vuedraggable";
import SliderInput from "@/components/SliderInput";
import PositionSelector from "@/components/PositionSelector";
import NavItemForm from "@/components/NavItemForm";
import NavItem from "../../modules/NavItem";
import { getNavList, updateNav, deleteNav, updateNavsOrder, } from "@/api/nav";
// import style
//import "swiper/css/swiper.css";
// If you use Swiper 6.0.0 or higher
//import "swiper/swiper-bundle.css";

export default {
    components: {
        ImagePicker,
        SliderInput,
        NavItemForm,
        draggable,
        ModuleStyleEditor,
        PositionSelector,
        HeaderEditor,
        NavItem,
    },
    data () {
        return {
            nav: {},
            navs: [],
            newUrl: "",
            activeTab: "base",
            showForm: true,
            currentIndex: 0,
            fileTypes: ["image"],
            loading: false,
        };
    },
    props: {
        module: { type: Object },
    },

    mounted: function () {
        this.loadNavs();
    },

    computed: {
        positionId: {
            get () {
                var pid = this.module.positionId;
                if (!pid || pid == "") {
                    return null;
                }
                return parseInt(pid);
            },
            set (val) {
                val = parseInt(val);
                this.$set(this.module, "positionId", val)
                this.navs = []
                this.loadNavs();
            },
        },

        navItemSize: function () {
            // 4 列
            if (this.module.styleName.toString() == "4") {
                return "80";
            }
            return "55";
        },
    },
    methods: {
        formChange: function () {
            // 修改或者增加了一个icon 
            this.loadNavs()
            this.$store.dispatch("pagemaker/reloadPage");
        },

        editHandle: function (item) {
            this.$refs.navform.openDialog(item);
        },

        submitOrders: function () {
            // 提交排序数据
            var ids = this.navs.map((nav, number) => {
                return nav.id;
            });
            this.loading = true;
            updateNavsOrder(ids).then((res) => {
                this.loading = false;
                this.loadNavs();
                if (res.status != 0) {
                    return false;
                }
                this.$message.success("保存成功");
                //var pageId = this.$store.state.pagemaker.pageId;
                this.$store.dispatch("pagemaker/reloadPage");
                return true;
            });
        },

        loadNavs: function () {
            this.loading = true;
            getNavList({}).then((resp) => {
                this.navs = resp.data.filter((nav, i) => {
                    return (nav.position_id == this.positionId);
                });
                this.loading = false;
            });
        },

        selectHandle: function (index) {
            this.currentIndex = index;
        },

        changeHandle: function (e) {
            this.currentIndex = 0;
            this.loadNavs();
            var pageId = this.$store.state.pagemaker.pageId;
            this.$store.dispatch("pagemaker/loadPage", pageId);
        },

        newImageHandle: function (url) {
            if (!url) {
                return false;
            }

            var n = this.module.items.length + 1;
            var nav = { url: url, title: "按钮" + n, link: {}, color: "#333333" };
            this.module.items.push(nav);
            // 自动选择新上传的
            this.currentIndex = this.module.items.length - 1;
            this.newUrl = null;
        },

        deleteHandle: function (item) {
            var _this = this;
            this.$confirm("确定要删除这个按钮吗?", {
                confirmButtonText: "确定删除",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                deleteNav(item.id).then((resp) => {
                    _this.$store.dispatch("pagemaker/reloadPage");
                    _this.loadNavs();
                });
            });
        },



    },
};
</script>

<style scoped>
.nav-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-bottom: 50px;
}

.nav-list-li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: 1px solid #f3f3f3;
}

.nav-list-li .name {
    width: 100px;
}

.tips {
    font-size: 12px;
    color: #666;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
</style>